<template>
  <div>
    <el-collapse-item title="关联题目" name="1">
      <el-form :inline="true">
        <el-form-item label="组合逻辑">
          <el-select
            v-model="value.interlock_combinator"
            placeholder="Select">
            <el-option
              key="comb_and"
              label="和"
              value="and">
            </el-option>
            <el-option
              key="comb_or"
              label="或"
              value="or">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <el-table
        :data="value.wants"
        style="width: 100%">
        <el-table-column
          label="题目"
          width="180">
          <template slot-scope="scope">
            <el-select
              v-model="scope.row.uuid"
              placeholder="Select"
              @change="refresh_interlocks">
              <el-option
                v-for="item in questions.filter((x)=> (x.uuid !== value.uuid && (x.type === 'radio' || x.type === 'checkbox')))"
                :key="item.uuid"
                :label="item.title"
                :value="item.uuid">
              </el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column
          label=""
          width="180">
          <template slot-scope="scope">
            <el-select
              v-model="scope.row.inverted"
              placeholder="Select">
              <el-option
                key="inv_n"
                label="包含"
                :value="false">
              </el-option>
              <el-option
                key="inv_y"
                label="不包含"
                :value="true">
              </el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column
          label="遮罩">
          <template slot-scope="scope">
            <el-checkbox-group v-model="scope.row.mask">
              <el-checkbox 
                               v-for="(content, index) in (questions.find(x=>x.uuid ===scope.row.uuid) || []).choices"
                               :key="index"
                               :label="index">
                               {{content}}
              </el-checkbox>
            </el-checkbox-group>
          </template>
        </el-table-column>
          <el-table-column
            label="操作">
            <template slot-scope="scope">
              <el-button
                circle
                size="small"
                type="danger"
                icon="el-icon-delete"
                @click="delete_row(scope.$index)">
              </el-button>
            </template>
          </el-table-column>
      </el-table>
      <el-button
        circle
        size="medium"
        type="primary"
        icon="el-icon-plus"
        class="button-add-choice"
        @click="new_row">
      </el-button>
    </el-collapse-item>
  </div>
</template>

<script>
export default {
  props: ['value', 'questions'],
  data() {
    console.log(this.questions)
    return {}
  },
  methods: {
    refresh_interlocks() {
    },
    delete_row(index) {
      this.value.wants.splice(index, 1);
    },
    new_row() {
      this.value.wants.push({
        uuid: "",
        inverted: false,
        mask: []
      })
    }
  }
}
</script>
